﻿<html>
 <head>
  <script type="application/javascript">
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 500, 500);
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(149, 30);
  ctx.lineTo(150, 150);
  ctx.lineTo(30, 150);
  ctx.lineTo(30, 30);
  ctx.clip();
  ctx.clearRect(0, 0, 500, 500);
  /**
   * Work around a strange left edge offset problem in D2D.
   */
  ctx.restore();
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 1, 500);
  ctx.fillStyle = "white";
  ctx.fillRect(30, 30, 1, 120);
}
  </script>
 </head>
<body onload="draw()">
 <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
